<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
	</head>
	<body>
		<input type="text"  id="input_search"  /><br />
		<button type="button">搜索</button>
		<table id="example" class="display cell-border">
			<thead>
				<th><input type="checkbox" name="cb_select_all" /></th>
				<th>id</th>
				<th>名称</th>
				<th>价格</th>
				<th>出版日期</th>
				<th>数量</th>
				<th>操作</th>
			</thead>
			<tbody>

			</tbody>
		</table>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let name = "";
			let mytable= $("#example").DataTable({
				"processing": true,
				"ajax": {
					// url可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
					url: "http://localhost:8080/getlist",
					type: 'get',
					// 传给服务器的数据，可以添加我们自己的查询参数
					// data: function(param) {
					// 	param.opportunityNO = $('#txtSearch').val();
					// 	return param;
					// },
					//用于处理服务器端返回的数据。 dataSrc是DataTable特有的
					dataSrc: function(myJson) {
						// console.log(myJson);
						return myJson;
					}
				},
				"columns": [{
					"data": "id", //指定对象的属性，没render函数时，则属性值
					"className": "dt-body-center",
					"render": function(data, type, row, meta) {
						// console.log(data);//data属性值，为null，则跟row一样
						// console.log(type);
						// console.log(row);//当前行数据
						// console.log(meta);
						return `<input type="checkbox" name="cb_select" value="${data}">`;
					}
				}, {
					"data": "id",
					"render": function(data, type, row, meta) {
						return data + "haha";
					}
				}, {
					"data": "name"
				}, {
					"data": "price"
				}, {
					"data": "date"
				}, {
					"data": "count"
				}, {
					"data": null,
					"render": function(data, type, row, meta) {
						// console.log(data, type, row, meta);
						return `
								<button type="button">编辑</button>
								<button type="button">删除</button>
							`;
					}
				}],
				// 每一行创建完调用的函数
				"createdRow": function(row, data, dataIndex) {
					// row : tr dom
					// data: row data
					// dataIndex:row data's index
					console.log(row)
					console.log(data)
					console.log(dataIndex)
				},
				// // 每一行被创建，但还没有被加载到document中，这个函数优先于createdRow
				// // 个人觉得用createdRow更好
				"rowCallback": function(row, data, index) {
					// row : tr dom
					// data: row data
					// index:row data's index
					console.log(row)
					console.log(data)
					console.log(index)
				},
				// //thead被描画后调用
				"headerCallback": function(thead, data, start, end, display) {
					//thead:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
					// start end ：当前dispaly数据的开始结束序号
					// console.log(thead);
					// console.log(data)
					// console.log(start)
					// console.log(end)
					// console.log(display)
				},
				// // tfoot被描画后调用，通常可用于计算合计值
				"footerCallback": function(tfoot, data, start, end, display) {
					//tfoot:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
					// start end ：当前dispaly数据的开始结束序号
					// console.log(tfoot)
					// console.log(data)
					// console.log(start)
					// console.log(end)
					// console.log(display)
				},
				// // 初始化，描画都已经完成，常用于ajax
				"initComplete": function(settings, json) {
					console.log(settings)
					console.log(json)
				},
				// // 每次DataTable描画后都要调用，调用这个函数时，table可能没有描画完成，
				// // 所以不要在里面操作table的dom，要操作dom应放在initComplete
				"drawCallback": function(settings) {
					console.log(settings)
				},
				// // 这个函数可以改写数字的格式化方式
				// // 默认DataTable用 language.thousands来解析数字，“，”
				// "formatNumber": function(toFormat) {
				// 	console.log(toFormat)
				// 	return toFormat.toString().replace(
				// 		/\B(?=(\d{3})+(?!\d))/g, "'"
				// 	);
				// }
			});
			//完成搜索书名功能。基于数组和基于ajax都要
			$("button").click(function(){
				mytable.ajax.url("http://localhost:8080/getlist?name="+$("#input_search").val()).load();
			})
		</script>
	</body>
</html>
